<!-- 录音题 答案解析 -->
<template>
  <div>
    <audio style="margin-top: 20px;margin-left: 10px;"  controls="controls" v-if="que.progressAttemptList[0].atmResponseBil"  :src="appUrl + que.progressAttemptList[0].atmResponseBil" width="500" height="40" ></audio>
    <p class="font-size14 paddingLR15" style="padding-top: 17px;">{{ $t("exam_rpt_nbr_score") }}<span style="padding-left: 5px;">({{ Math.max(0, que.getScore) }}/{{ que.totalQueScore }})</span></p><!--本题得分-->
    <div class="paddingLR15 clearfix" style="padding-top: 28px;">
        <p>{{ $t("exam_rpt_nbr_anwser") }}</p><!--参考答案-->
        <p class="font-size14 color666" style="margin-top: 15px;">{{ que.queRightOpt ? que.queRightOpt : '' }}</p>
    </div>
    <div class="paddingLR15 clearfix" style="padding-top: 28px;" v-if="que.resDesc">
        <p class="box-23"><span class="line"></span><span class="title">{{ $t("exam_rpt_que_analysis") }}</span></p><!--解析-->
        <p class="font-size14 color666" style="margin-top: 15px;">{{ que.resDesc }}</p>
    </div>
  </div>
</template>
<script>
export default {
    name: 'sr-answer',
    props: {
        que: {
            type: Object,
            default: () => {
                return {};
            }
        }
    }
};
</script>
<style scoped lang="less">
  .list-option {
      li {
          .border-box {
              margin: 15px 0 0 0;
              border: 1px solid #e6e6e6;
              border-radius: 4px;
              .title {
                  width: 100%;
                  span {
                      padding: 13px 10px 13px 0;
                      display: block;
                      color: #999999;
                      font-size: 14px;
                  }
              }
          }
      }
  }
  .option-circle {
      display: inline-block;
      padding: 0 0 0 15px;
      box-sizing: border-box;
      &:before {
          content: "";
          display: inline-block;
          width: 16px;
          height: 16px;
          border: 2px solid #cccccc;
          border-radius: 50%;
          margin-bottom: -4px;
      }
      &.cur:before {
          background: url(../images/course-icon.png) no-repeat -2px -338px;
          background-size: 20px;
      }
      &.current:before {
          border-radius: 3px;
      }
      &.current.cur:before {
          background: url(../images/course-icon.png) no-repeat -2px -368px;
          background-size: 20px;
      }
  }
  .answer-box {
      width: 60px;
      height: 100%;
      border-left: 1px solid #e6e6e6;
      span:before {
          content: "";
          display: block;
          width: 15px;
          height: 15px;
          background: url(../images/course-icon.png) no-repeat 0 -318px;
          background-size: 15px;
          margin: 0 auto;
      }
      span.wrong:before {
          background-position: 0 -298px;
      }
  }
  .box-23 {
      .line {
          float: left;
          width: 100%;
          border-top: 1px solid #e6e6e6;
      }
      .title {
          float: left;
          padding-right: 20px;
          background: #ffffff;
          margin-top: -11px;
      }
  }
</style>
